<%--
  Created by IntelliJ IDEA.
  User: asus
  Date: 2020/5/27
  Time: 14:58
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" isELIgnored="true" %>
<html>
<head>
    <title>出库</title>
    <%@include file="/comm/head.jsp"%>
</head>
<body>
<div id="root">

    <i-table :columns="columns" :data="pageResult.rows"  :height="300"  border stripe>

        <template slot-scope="{row}" slot="proName">
            <span>{{row.provider.proName}}</span>
        </template>
        <template slot-scope="{row}" slot="username">
            <span>{{row.user.username}}</span>
        </template>
        <template slot-scope="{row}" slot="state">
            <span v-if="row.state==0" >未出库</span>
            <span v-if="row.state==1" >已出库</span>
            <span v-if="row.state==2" >已确认</span>
            <span v-if="row.state==3" >已入库</span>
        </template>
        <template slot-scope="{row,index}"  slot="action">
            <i-button type="warning" @click="searchRow(row,index)">详 情</i-button>
        </template>
    </i-table>
    <modal v-model="searchOut" title="订单明细" @on-ok="add">
        <i-form :label-width="80" style="padding: 30px" >
            <form-item label="商品ID" >
                <i-input v-model="chuKu.goodId"  readonly/>
            </form-item>
            <form-item label="商品名称">
                <i-input v-model="chuKu.goodName" readonly/>
            </form-item>
            <form-item label="数量">
                <i-input v-model="chuKu.number" readonly/>
            </form-item>
            <form-item label="仓库" >
                <i-select v-model="chuKu.storeId" style="width: 180px">
                    <i-Option v-for="item in storeList" :value="item.id" :key="item.id">{{item.sname}}</i-Option>
                </i-select>
            </form-item>
        </i-form>
    </modal>
    <modal v-model="searchFlag" title="详细详情"  :width="1400" <%--@on-ok="searchDetail()"--%>>
        <i-table :columns="columns1" :data="data2"  :height="100"  border stripe>
            <template slot-scope="{row}" slot="proName">
                <span>{{row.provider.proName}}</span>
            </template>
            <template slot-scope="{row}" slot="username">
                <span>{{row.user.username}}</span>
            </template>
            <template slot-scope="{row}" slot="state">
                <span v-if="row.state==0" >未出库</span>
                <span v-if="row.state==1" >已出库</span>
                <span v-if="row.state==2" >已确认</span>
                <span v-if="row.state==3" >已入库</span>
            </template>
        </i-table>
        <i-table :columns="columns2" :data="data3" border stripe :height="400">
            <template slot-scope="{row}" slot="id">
                <span>{{row.orderDetail.id}}</span>
            </template>
            <template slot-scope="{row}" slot="goodsId">
                <span>{{row.orderDetail.goodsId}}</span>
            </template>
            <template slot-scope="{row}" slot="goodName">
                <span>{{row.orderDetail.goodName}}</span>
            </template>
            <template slot-scope="{row}" slot="price">
                <span>{{row.orderDetail.price}}</span>
            </template>
            <template slot-scope="{row}" slot="number">
                <span>{{row.orderDetail.number}}</span>
            </template>
            <template slot-scope="{row}" slot="money">
                <span>{{row.orderDetail.money}}</span>
            </template>
            <template slot-scope="{row}" slot="state">
                <span v-if="row.state==0" >未出库</span>
                <span v-if="row.state==1" >已出库</span>
                <span v-if="row.state==2" >已确认</span>
                <span v-if="row.state==3" >已入库</span>
            </template>
            <template slot-scope="{row,index}"  slot="chuku">
                 <span v-if="row.state==0" >
                <i-button type="warning" @click="toOut(row,index)">出库</i-button>
                     </span>
            </template>
        </i-table>
    </modal>

    <Page :total="pageResult.total"
          :page-size="pageSize"
          @on-change="pageNo=arguments[0];search();"
          show-sizer
          :page-size-opts="[5,10,15]"
          @on-page-size-change="pageSize=arguments[0];search();"
    />
</div>

<script>
    new  Vue({
        el:"#root",
        data:{
            columns:[
                {type:"selection",width:60,align:"center"},//自动开启多选功能
                { key:"id",title:"编号"},
                {key:"createTime",title:"生成日期"},
                {key:"checkTime",title:"审核日期"},
                {key:"purchaseTime",title:"确认日期"},
                {title:"入库日期",key: "stockTime"},
                {title:"下单员",slot: "username"},
                {title:"审核员",slot: "username"},
                {title:"采购员",slot:"username"},
                {title:"库管员",slot:"username"},
                { slot:"proName",title:"供应商"},
                {title:"合计金额",key:"totalMoney"},
                {title:"状态",slot:"state"},
                {title:"运单号",key:"wayBillCode"},
                {title:"操作",slot:"action",width:300}
            ],
            columns1:[
                { slot:"proName",title:"供应商"},
                {title:"订单状态",slot:"state"},
                {title:"下单员",slot:"username"},
                {title:"审核员",slot:"username"},
                {title:"采购员",slot:"username"},
                {title:"库管员",slot:"username"},
                {title:"入库日期",key: "stockTime"},
                {title:"生成日期",key: "createTime"},
                {title:"审核日期",key: "checkTime"},
                {title:"运单号",key:"wayBillCode"}

            ],
            columns2:[
                {title:"编号",slot:"id"},
                {title:"商品编号",slot: "goodsId"},
                {title:"商品名称",slot: "goodName"},
                {title:"价格",slot: "price"},
                {title:"数量",slot:"number"},
                {title:"金额",slot:"money"},
                {title:"订单状态",slot:"state"},
                {title:"操作",slot:"chuku",width:200}
            ],
            /*   columns4:[
                   {title:"商品ID",slot:"goodsId"},
                   {title:"商品名称",slot: "goodName"},
                   {title:"数量",slot:"number"},
                   {title:"仓库",slot:"cang"},

               ],*/
            pageResult:{
                rows:[],
                total:50
            },
            pageNo:1,
            pageSize:5,
            searchFlag:false,
            searchOut:false,
            chuKu:{
                goodId:"",
                goodName:"",
                number:"",
                storeId:"",
                orderId:"",

            },
            data2:[],
            data3:[],
            data4:[],
            storeList:[],

        },
        methods:{
            search(){
                axios.get(`${ctx}/out/sal/search/${this.pageNo}/${this.pageSize}`)
                    .then(({data})=>{
                        this.pageResult=data.result;
                    });
            },
            searchRow(row,index){
                this.searchFlag=true;
                axios.get(`${ctx}/out/sal/search?id=${row.id}`)
                    .then(({data})=>{
                        this.data2=data.result;
                        this.search();
                    });
                <%--console.log(${row.id})--%>
                axios.get(`${ctx}/out/sal/searchAll?id=${row.id}`)
                    .then(({data})=>{
                        this.data3=data.result;
                        this.search();
                    });
            },
            toOut(row,index){
                // Object.assign(this.chuKu,row);
                // console.log(this.chuKu)
                this.searchOut=true;

                axios.get(`${ctx}/out/sal/searchOut?id=${row.id}`)
                    .then(({data})=>{
                        console.log(data.result)
                        this.chuKu=data.result;
                        this.chuKu.goodId=this.chuKu.goodsId;
                        this.chuKu.orderId=this.chuKu.orderId;
                        // console.log(this.chuKu)
                        this.search();

                    });
            },
            searchStoreList(){
                axios.get(`${ctx}/kucun/store/list`)
                    .then(({data})=>{
                        this.storeList=data.result;
                    });
            },
            add(){
                axios.post(`${ctx}/out/sal/add`,this.chuKu)
                    .then(({data})=>{
                        this.searchOut=false;
                        this.searchFlag=false;
                        iview.Message.success({content:data.msg});
                        this.search();


                    });
            },

        },
        mounted(){
            this.search();
            this.searchStoreList();
        }
    });
</script>
</body>
</html>
